<template>
	<div class="send-index">
		<MakeHeader />
		<!--<div class="send-rich" v-if='richSize'>
			<img src="../../assets/public/small.png" alt="" @click = 'changeSize(false)'/>
			<keep-alive>
				<component :is="activeBigUE" :defaultMsg=defaultMsg :config=config ref="ue"></component>
			</keep-alive>
		</div>-->
		<div class="make-text" @click="cancelType">
			<div class="text-hongtou">
				<span><i>*</i>标题：</span>
				<input type="text" v-model="inputData[0].content" @focus="htFocus(0)" @blur="htBlur(0)" maxlength="20"/>
				<p v-if="inputData[0].notice">最多可输入20个汉字</p>
				<em v-if="inputData[0].inputNotice"><i></i>请输入标题</em>
			</div>
			<div class="text-hongtou">
				<span>关键字：</span>
				<input type="text" v-model="inputData[1].content" @focus="htFocus(1)" @blur="htBlur(1)" maxlength="5"/>
				<p v-if="inputData[1].notice">最多可输入5个汉字</p>
				<em v-if="inputData[1].inputNotice === 1"><i></i>空格或者英文逗号隔开！</em>
				<em v-if="inputData[1].inputNotice === 2" class="key-word-notice">空格或者英文逗号隔开！</em>
			</div>
			<div class="text-hongtou">
				<span>文章来源：</span>
				<input type="text" v-model="inputData[2].content" @focus="htFocus(2)" @blur="htBlur(2)" maxlength="20"/>
				<p v-if="inputData[2].notice">最多可输入20个汉字</p>
			</div>
			<div class="text-type">
				<span>文章主题：</span>
				<div class="report-type-right">
					<div class="report-type-all" @click="clickType(0,$event)">
						<p>{{typeContent[0]}}</p>
						<i></i>
					</div>
					<div class="report-type-select" v-if="isType === 0">
						<ul>
							<li @click="clickSelect(0,$event)">军事</li>
							<li @click="clickSelect(0,$event)">政治</li>
							<li @click="clickSelect(0,$event)">体育</li>
							<li @click="clickSelect(0,$event)">科技</li>
							<li @click="clickSelect(0,$event)">教育</li>
							<li @click="clickSelect(0,$event)">人文</li>
							<li @click="clickSelect(0,$event)">自然</li>
							<li @click="clickSelect(0,$event)">航空</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="text-type">
				<span>文章信息来源：</span>
				<div class="report-type-right">
					<div class="report-type-all" @click="clickType(1,$event)">
						<p>{{typeContent[1]}}</p>
						<i></i>
					</div>
					<div class="report-type-select" v-if="isType === 1">
						<ul>
							<li @click="clickSelect(1,$event)">军事</li>
							<li @click="clickSelect(1,$event)">政治</li>
							<li @click="clickSelect(1,$event)">体育</li>
							<li @click="clickSelect(1,$event)">科技</li>
							<li @click="clickSelect(1,$event)">教育</li>
							<li @click="clickSelect(1,$event)">人文</li>
							<li @click="clickSelect(1,$event)">自然</li>
							<li @click="clickSelect(1,$event)">航空</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="text-abstract">
				<span><i>*</i>摘要：</span>
				<div class="abstract-right">
					<textarea class="abstract-content" v-model="inputData[3].content" @focus="htFocus(3)" 
						@blur="htBlur(3)" maxlength="80"></textarea>
					<p v-if="inputData[3].notice">最多可输入80个汉字</p>
					<em v-if="inputData[3].inputNotice"><i></i>请输入内容</em>
				</div>
				
			</div>
			<div class="text-content">
				<span><i>*</i>内容：</span>
				<div class="text-fuwenben">
					<div>
						<keep-alive>
							<component :is="activeSmallUE" :defaultMsg=defaultMsg :config=config ref="ue"></component>
						</keep-alive>
						<!--<img src="../../assets/public/rich.png" alt="" @click = 'changeSize(true)'/>-->
					</div>
				</div>
			</div>
			<p class="hidden-name"><i @click="changeHidden($event)" value="true"></i>匿名发稿</p>
			<div class="text-submit">
				<a href="javascript:;" @click.native='getUEContent($event)'>发表</a>
			</div>
		</div>
	</div>
</template>

<script>
	// 引入头部
	import MakeHeader from '@/components/header'
	// 引入jquery
	import $ from 'jquery'
	import '../../../static/UE/ueditor.config.js'
	import '../../../static/UE/ueditor.all.js'
	import '../../../static/UE/lang/zh-cn/zh-cn.js'
	import '../../../static/UE/ueditor.parse.js'
	// 引入富文本组件
	import UE from '@/components/public/richText'
	export default {
		components: {
			MakeHeader,
			UE
		},
		data () {
			return {
				inputData: [
					{
					  notice: true, // 未填写是提示	
					  inputNotice: false, //输入框提示
					  content: '' // 输入框内容
					},
					{
					  notice: true, // 未填写是提示	
					  inputNotice: null, //输入框提示
					  content: '' // 输入框内容
					},
					{
					  notice: true, // 未填写是提示	
					  inputNotice: false, //输入框提示
					  content: '' // 输入框内容
					},
					{
					  notice: true, // 未填写是提示	
					  inputNotice: false, //输入框提示
					  content: '' // 输入框内容
					}
				],
				isType: null, // 类型下拉框是否显示
				typeContent: ['军事','军事'], // 类型默认值
				richSize: false, // 富文本是否放大
				defaultMsg: '', // 富文本初始输入内容
		        config: { // 富文本样式
		          initialFrameWidth: null,
		          initialFrameHeight: 350
		        },
		        activeSmallUE: 'UE'
			}
		},
		methods: {
			// 输入框获取焦点
			htFocus (index) {
				var that = this
				that.inputData[index].notice = false
				if (index === 1) {
					that.inputData[index].inputNotice = 2
				}
			},
			// 输入框失去焦点
			htBlur (index) {
				var that = this
				var data = that.inputData[index]
				if (index === 0) {
					if (data.content) {
						data.notice = false
						data.inputNotice = false
					} else {
						data.notice = true
						data.inputNotice = true
					}
				} else if (index === 1) {
					if (data.content) {
						data.notice = false
						data.inputNotice = null
					} else {
						data.notice = true
						data.inputNotice = null
					}
				} else if (index === 2) {
					if (data.content) {
						data.notice = false
					} else {
						data.notice = true
					}
				} else if (index === 3) {
					if (data.content) {
						data.notice = false
						data.inputNotice = false
					} else {
						data.notice = true
						data.inputNotice = true
					}
				}
				
			},
			// 红头限制字数
			// 文章类型点击出现文章的下拉框
			clickType (index,e) {
				var eve = e || window.event
				if(eve.stopPropagation){
					eve.stopPropagation()
				}else{
					eve.cancelBubble = true
				}
	  			var that = this
	  			that.isType = index
			},
			// 点击其他关闭文章类型的下拉框
			cancelType () {
				var that = this
  				that.isType = null
			},
			// 文章类型选择
			clickSelect (index,e) {
				var that = this
				var eve = e || window.event
				that.typeContent[index] = eve.target.innerHTML
			},
			// 简报列表，文章标题选择
			selectTitle (e) {
				var eve = e || window.event
				var that = this
				var $eve = $(eve.target)
				var temp = !$eve.val()
				$eve.val(temp)
				if ($eve.val()) {
					$eve.addClass("isChecked")
				} else {
					$eve.removeClass("isChecked")
				}
			},
			// 是否匿名发稿
			changeHidden (e) {
				var eve = e || window.event
				var $eve = $(eve.target)
				var temp = !$eve.val()
				$eve.val(temp)
				if (temp) {
					$eve.addClass('nameShow')
				} else {
					$eve.removeClass('nameShow')
				}
			},
			// 是否放大富文本
			/*changeSize (value) {
				var that = this
//				that.richSize = value
				let content = this.$refs.ue.getUEContent();
				that.defaultMsg = content
				var edui1 = document.querySelector('#edui1')
				console.log(edui1)
//				if (value) {
//					console.log(1)
//					that.activeBigUE = 'UE'
//					that.activeSmallUE = ''
//				} else {
//					console.log(2)
//					that.activeBigUE = ''
//					that.activeSmallUE = 'UE'
//				}
			},*/
			// 点击获取获取富文本的内容
			getUEContent(e) {
				var that = this
				that.config.initialFrameWidth = 0
		        that.config.initialFrameHeight = 0
		        let content = this.$refs.ue.getUEContent();
//			    this.$notify({
//			      title: '获取成功，可在控制台查看！',
//			      message: content,
//			      type: 'success'
//			    });
		    }
		}
	}
</script>

<style scoped>
 @import '../../../static/sendReport/sendIndex.css';
</style>